<template>
  <div class="tool-complex tool-button" @click="onclick" @dblclick="dblclick">
    <span
      :style="{
        color: attr.color,
        fontSize: `${attr.fontSize}px`,
        fontWeight: attr.fontWeight,
      }"
      >{{ attr.text }}</span
    >
  </div>
</template>

<script>
import mixins from "../mixin";
export default {
  name: "tool-button",
  mixins: [mixins],
  data() {
    return {
      attr: null,
    };
  },
  methods: {
    onclick() {
      // 单击事件
      console.log("我是按钮点击事件");
      // 交互组件信息
      this.active.map((item, index) => {
        if (item.event === "onclick") {
          // console.log('交互事件' + index)
          this.$store.dispatch("design/active", item);
        }
        return item;
      });
    },
    dblclick() {
      // 双击事件
      console.log("我是按钮双击事件");
      // 交互组件信息
      this.active.map((item, index) => {
        if (item.event === "dblclick") {
          this.$store.dispatch("design/active", item);
        }
        return item;
      });
    },
  },
  pageData: {
    version: "0.0.1",
    name: "tool-button",
    title: "按钮",
    count: 0,
    width: 200,
    height: 60,
    config: {
      label: "基础按钮",
      attr: [
        {
          key: "text",
          title: "按钮名称",
          formType: "text-string",
          group: "basics",
          type: "String",
          data: "基础按钮",
        },
        {
          key: "borderColor",
          title: "边框颜色",
          formType: "color-picker",
          group: "basics",
          type: "String",
          data: "#ddd",
        },
        {
          key: "background",
          title: "背景颜色",
          formType: "color-picker",
          group: "basics",
          type: "String",
          data: "#409eff",
        },
        {
          key: "color",
          title: "字体颜色",
          formType: "color-picker",
          group: "text",
          type: "String",
          data: "#fff",
        },
        {
          key: "fontSize",
          title: "字体大小",
          formType: "text-number",
          group: "text",
          type: "Number",
          data: 16,
        },
        {
          key: "fontWeight",
          title: "字体粗细",
          formType: "text-number",
          group: "text",
          type: "Number",
          data: 500,
        },
      ],
      active: [
        {
          bindId: 1663659162977, // 绑定操作组件
          event: "onclick",
          reslut: null, // 操作事件属性
          value: "",
          params: null,
          describe: "事件描述",
        },
      ],
    },
  },
};
</script>

<style scoped lang="scss">
.tool-complex {
  width: 100%;
  height: 100%;
  transition: all 0.58s;
}
.tool-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  // background-color: #409eff;
  cursor: pointer;
  background-image: linear-gradient(
    -75deg,
    rgba(112, 133, 241, 0.75),
    rgba(211, 206, 255, 0.75) 31%,
    rgba(177, 130, 233, 0.75) 68%,
    rgba(120, 141, 255, 0.75)
  );

  &::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1px;
    // background: linear-gradient(94deg, #7085f1, #e7dce2, #b182e9, #7085f1);
  }
}
</style>
